.d-flex.justify-content-between.flex-wrap.flex-md-nowrap.align-items-center.pt-3.pb-2.mb-3.border-bottom
  %h1.h2 User Defined Objects

- if @udos_templates.empty?
  %h2.h5 It appears you do not have any user defined objects. Would you like to add some?
- else
  %h2.h4 User Defined Object template list :
  .table.table-striped
    %table
      - @udos_templates.each do |udo|
        %tr
          %td
            %strong
              %i
                #{udo.type}
          %td
            - udo_properties = JSON.parse(udo.udo_properties)
            - udo_properties.each do |key, value|
              &ensp; #{key}
          %td
            %a.btn.btn-small.btn-warning.btn-sm{ :href => "/admin/udo_template/#{udo.id}/edit" }
              %i.fas.fa-pencil-alt{ :title => "Edit #{udo.type.downcase} template" }
            %a.btn.btn-small.btn-danger.btn-sm{ :href => "/admin/udo_templates?delete=#{udo.id}" }
              %i.far.fa-trash-alt{ :title => "Delete #{udo.type.downcase} template" }

%br
%br
%h2.h4 Add an User Defined Object template :
#fields.control-group
  %label.control-label{ :for => "field1" }
  #profs.controls
    %form.input-append{ :method => "post" }
      #field
        .table.table-striped
          %table
            %tr
              %td
                Object Type:
              %td
                %input#object_name.form-control{ :type => "text", :name => "object_type", :placeholder => "Object Type", :required => true }
            %tr
              %td
                Object Properties Names:
              %td
                %input#field1.input{ "data-items" => "8", :name => "property_1", :placeholder => "Property Name 1", :type => "text", :required => true, :autocomplete => "off" }
                %button#b1.btn.btn-sm.btn-success.add-more.ml-0{ :type => "button" }
                  %i.fas.fa-plus
      %br
      %input.btn.btn-primary{ :type => "submit", :value => "Save", :name => "action" }
      %a.btn.btn-secondary{ :href => "/" }
        Cancel

:javascript
  var removeBtnPrefix = "remove";
  $(document).ready(function(){
      var next = 1;
      $(".add-more").click(function(e){
          e.preventDefault();
          var addto = "#field" + next;
          var addRemove = "#field" + (next);
          next = next + 1;
          var newIn = '<input autocomplete="off" placeholder="Property Name '+ next +'" class="input" id="field' + next + '" name="property_' + next + '" type="text">';
          var newInput = $(newIn);
          var removeBtn = '<button id="' + removeBtnPrefix + (next - 1) + '" class="btn btn-sm btn-danger remove-me ml-1" ><i class="fas fa-minus"></i></button><div id="divClear' + (next - 1) + '"></div>';
          var removeButton = $(removeBtn);
          $(addto).after(newInput);
          $(addRemove).after(removeButton);
          $("#field" + next).attr('data-source',$(addto).attr('data-source'));
          $("#count").val(next);

          $('.remove-me').click(function(e){
              e.preventDefault();
              var fieldNum = this.id.substring(removeBtnPrefix.length,this.id.length);
              var fieldID = "#field" + fieldNum;
              $(this).remove();
              $(fieldID).remove();
          });
      });
  });
